{% extends 'layout.html' %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h5 class="box-title"><b>用户组列表</b></h5>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-chevron-up"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool disabled" disabled data-widget="remove"><i
                                class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="table-responsive">
                        <div id="toolbar">
                            <button id="btn_add" class="btn btn-sm btn-default">
                                <i class="fa fa-plus"></i> 创建用户组
                            </button>
                            <button id="btn_remove" class="btn btn-sm btn-danger">
                                <i class="fa fa-trash-o"></i> 批量删除
                            </button>
                        </div>
                        <table id="table">
                        </table>

                    </div>
                    <!-- /.row -->
                </div>
                <!-- ./box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>
{% endblock %}

{% block self_footer_js %}
    <script>
        var $table = $('#table'),
            $remove = $('#remove'),
            selections = [];

        function initTable() {
            $table.bootstrapTable({
                method: 'get',
                url: '{% url 'user_group_getlist' %}',
                toolbar: '#toolbar',
                //指定主键列
                idField: 'id',
                sidePagination: "server",
                striped: true,
                search: true,
                showRefresh: true,
                pagination: true,
                pageSize: 8,
                pageList: [10, 25, 50, 100],
                cache: false,
                clickToSelect: true,
                columns: [
                    {
                        field: 'state',
                        checkbox: true,
                        align: 'center'
                    },
                    {
                        field: 'id',
                        title: 'ID',
                        align: 'center',
                        visible: false
                    }, {
                        field: 'name',
                        title: '名称',
                        sortable: true,
                        align: 'center',
                        formatter: nameFormatter
                    }, {
                        field: 'usernumber',
                        title: '用户数量',
                        align: 'center',
                        formatter: membersFormatter
                    }, {
                        field: 'comment',
                        title: '备注',
                        align: 'center'
                    }, {
                        field: 'operate',
                        title: '操作',
                        align: 'center',
                        events: operateEvents,
                        formatter: operateFormatter
                    }

                ]
            })
        }

        function nameFormatter(value, row, index) {
            return '<a href="{% url 'user_group_detail' %}?id=' + row.id + '">' + row.name + '</a>'
        }

        function membersFormatter(value, row, index) {
            return [
                '<a href="{% url 'user_list' %}?gid=' + row.id + '">',
                value + '</a>',
            ].join('');
        }

        //操作列方法
        function operateFormatter(value, row, index) {
            /*return [
             //'<a class="like" href="javascript:void(0)" title="Like">',
             //'<i class="glyphicon glyphicon-heart"></i>',
             //'</a>  ',
             '<a class="edit" href="javascript:void(0)" title="edit">',
             '<i class="glyphicon glyphicon-edit"></i>',
             '</a>  ',
             '<a class="remove" href="javascript:void(0)" title="Remove">',
             '<i class="glyphicon glyphicon-remove"></i>',
             '</a>'
             ].join('');*/
            return [
                '<a class="edit btn btn-xs btn-default" href="javascript:void(0)" title="edit">',
                '<i class="fa fa-edit"></i> 编辑</a> ',
                '<a class="remove btn btn-xs btn-danger" href="javascript:void(0)" title="Remove">',
                '<i class="fa fa-trash-o"></i> 删除',
                '</a>'
            ].join('');
        }
        window.operateEvents = {
            'click .edit': function (e, value, row, index) {
                Edit(row.id);
            },
            'click .remove': function (e, value, row, index) {
                BootstrapDialog.confirm({
                    title: "警告",
                    size: BootstrapDialog.SIZE_SMALL,
                    type: BootstrapDialog.TYPE_WARNING,
                    message: "确定删除用户组 <span class='red'>" + row.name + "</span> 吗？",
                    draggable: true,
                    btnCancelLabel: '放弃',
                    btnCancelClass: 'btn-white',
                    btnOKLabel: '确认',
                    callback: function (result) {
                        if (result) {
                            var ids = [row.id];
                            $.post("{% url 'user_group_del' %}", {ids: ids}, function (data) {
                                    if (data.code != 0) {
                                        $table.bootstrapTable("refresh");
                                        new PNotify({
                                            title: 'Success!',
                                            text: '用户组【' + row.name + '】删除成功',
                                            type: 'success'
                                        });
                                    }
                                    else BootstrapDialog.alert(data.message);

                                }, "json"
                            );
                        }
                    }
                });
            }
        };

        function Edit(id) {
            var addDialog = new BootstrapDialog({
                    title: "编辑用户组信息",
                    message: function (dialog) {
                        var $message = $('<div></div>');
                        var pageToLoad = dialog.getData('pageToLoad');
                        $message.load(pageToLoad);

                        return $message;
                    },
                    data: {
                        'pageToLoad': "{% url 'user_group_edit' %}?id=" + id
                    },
                    buttons: [{
                        cssClass: "btn-default",
                        label: "保存",
                        action: function (dialogItself) {
                            ////提交表单数据之前，先选中右侧
                            $('#users_selected option').each(function () {
                                $(this).prop('selected', true)
                            });

                            /*$("#group_from").validator({
                             valid: function (form) {
                             form.submit();
                             }
                             });*/

                            $.post($("#group_form").attr("action"), $("#group_form").serializeArray(), function (data) {
                                if (data.code == 1) {
                                    dialogItself.close();
                                    addDialog.close();
                                    $table.bootstrapTable("refresh");
                                    new PNotify({
                                        title: 'Success!',
                                        text: '用户组【sss】编辑成功',
                                        type: 'success'
                                    });
                                }
                                else BootstrapDialog.alert(data.message);
                            }, "json");
                        }
                    }, {
                        label: "取消",
                        cssClass: 'btn-white',
                        action: function (dialogItself) {
                            dialogItself.close();
                        }
                    }]
                })
            ;
            addDialog.open();
        }


        $(function () {
            //初始化表格
            initTable();

            // add button
            $("#btn_add").click(function () {
                var addDialog = new BootstrapDialog({
                    title: "填写基本信息",
                    draggable: true,
                    message: function (dialog) {
                        var $message = $('<div></div>');
                        var pageToLoad = dialog.getData('pageToLoad');
                        $message.load(pageToLoad);
                        return $message;
                    },
                    data: {
                        'pageToLoad': "{% url 'user_group_add' %}"
                    },
                    buttons: [{
                        cssClass: "btn-default",
                        label: "保存",
                        action: function (dialogItself) {
                            $.post($("#group_form").attr("action"), $("#group_form").serializeArray(), function (data) {
                                if (data.code == 1) {
                                    dialogItself.close();
                                    addDialog.close();
                                    $table.bootstrapTable("refresh");
                                    new PNotify({
                                        title: 'Success!',
                                        text: '用户组【sss】保存成功',
                                        type: 'success'
                                    });
                                }
                                else BootstrapDialog.alert(data.message);
                            }, "json");
                            //$("#groupForm").validate();
                        }
                    }, {
                        cssClass: 'btn-white',
                        label: "取消",
                        action: function (dialogItself) {
                            dialogItself.close();
                        }
                    }]
                });
                addDialog.open();
            });

            // delete button
            $("#btn_remove").click(function () {
                var selected = $table.bootstrapTable('getSelections');
                if ($(selected).length > 0) {
                    BootstrapDialog.confirm({
                        title: "警告",
                        size: BootstrapDialog.SIZE_SMALL,
                        type: BootstrapDialog.TYPE_WARNING,
                        message: "确定删除选中的" + $(selected).length + "个用户组吗？",
                        draggable: true,
                        btnCancelLabel: '放弃',
                        btnCancelClass: 'btn-white',
                        btnOKLabel: '确认',
                        //btnOKClass: 'btn-default',
                        callback: function (result) {
                            if (result) {
                                var ids = new Array($(selected).length);
                                $.each(selected, function (index, value) {
                                    ids[index] = value.id;
                                });
                                $.post("{% url 'user_group_del' %}", {ids: ids}, function (data) {
                                        if (data.code != 0) {
                                            $table.bootstrapTable("refresh");
                                            dialogItself.close();
                                        }
                                        else {
                                            new PNotify({
                                                title: 'Info',
                                                text: data.message,
                                                type: 'info'
                                            });
                                        }

                                    }, "json"
                                );
                            }
                        }
                    });
                }
                else {
                    new PNotify({
                        title: 'Notice!',
                        text: '没有选择需要操作的记录'
                    });
                }
            });
        });
    </script>
{% endblock %}